<template>
  <div>
    <!-- 添加或修改公告对话框 -->
    <el-dialog :title="title" :visible.sync="$parent.open" width="780px" append-to-body>
      <div class="center_dialog">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="广告名称" prop="advName">
            <el-input v-model="form.advName" placeholder="请输入广告名称" />
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="form.sort" style="width:100%" placeholder="请输入排序" controls-position="right"
              :min="1">
            </el-input-number>
          </el-form-item>
          <el-form-item label="功能模块" prop="model">
            <el-select v-model="form.model" placeholder="请选择供应商" style="width:100%">
              <el-option v-for="(dict, index) in ['首页', '工作台']" :key="index" :label="dict" :value="index + ''">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="广告位置" prop="place">
            <el-select v-model="form.place" placeholder="请选择广告位置" style="width:100%">
              <el-option v-for="(dict, index) in ['首页轮播图']" :key="index" :label="dict" :value="index + ''"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="链接类型" prop="linkType">
            <el-select v-model="form.linkType" placeholder="请选择链接类型" style="width:100%">
              <el-option v-for="(dict, index) in ['无链接']" :key="index" :label="dict" :value="index + ''"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="链接内容" prop="linkResult">
            <el-input v-model="form.linkResult" disabled placeholder="请输入链接内容" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status" placeholder="请选择状态" style="width:100%">
              <el-option v-for="(dict, index) in ['上架', '下架']" :key="index" :label="dict" :value="index + ''">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="广告图片" prop="img">
            <Upload :imgUrl="form.img" :isDisabled="['update']" @clearimgUrl="() => form.img = ''"
              @handleSuccess="handleSuccess"></Upload>
          </el-form-item>
          <!-- <el-form-item label="内容">
              <editor v-model="form.noticeContent" :min-height="192"/>
            </el-form-item> -->
        </el-form>
      </div>
      <div align="center" slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="() => $parent.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { postCreatedAdv, putUpdatedAdv } from '@/api/system/index.js'
import Upload from '@/components/upload/index.vue'
export default {
  props: ['title', 'rowObj'],
  components: {
    Upload
  },
  data () {
    return {
      form: {
        "advName": "", //广告名称
        "sort": undefined, //排序
        "model": "", //功能模块（0首页 1工作台）
        "place": "", //广告位置（0首页轮播图）
        "linkType": "", //链接类型（0无链接）
        "linkResult": "", //链接结果
        "status": "", //状态（0上架中 1下架中）
        "img": "" //图片
      },
      rules: {
        advName: { required: true, message: '必填', trigger: 'blur' },
        sort: { required: true, message: '必填', trigger: 'blur' },
        model: { required: true, message: '必填', trigger: 'blur' },
        place: { required: true, message: '必填', trigger: 'blur' },
        linkType: { required: true, message: '必填', trigger: 'blur' },
        status: { required: true, message: '必填', trigger: 'blur' },
        img: { required: true, message: '必填', trigger: 'blur' },
      }
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    handleSuccess (res) {
      console.log(res.res.data.url, '最初');
      this.form.img = res.res.data.url
    },
    getlist () {
      if (this.title === '修改广告') {
        this.form = { ...this.rowObj }
      }
    },
    //提交
    submitForm () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.title === '修改广告') {//修改
            let params = {
              ...this.form
            }
            putUpdatedAdv(params).then(res => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.$parent.open = false
                this.$parent.getList()
              }
            })
          } else {//新增
            let params = {
              ...this.form
            }
            postCreatedAdv(params).then(res => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.$parent.open = false
                this.$parent.handleUpdate()
              }
            })
          }
        }
      });
    },
    // handleremoveflie () {
    //   // 附件删除时调用
    //   this.form.file = ''
    //   // for (const key in this.flie) {
    //   //   this.flie[key] = ''
    //   // }
    // },
    // beforeAvatarUploadflie (file) {
    //   // 附件
    //   const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
    //   const whiteList = ['pdf', 'doc', 'xlsx', 'jpg', 'png']
    //   const isLt2M = file.size / 1024 / 1024 < 50
    //   if (whiteList.indexOf(fileSuffix) === -1) {
    //     this.$message({
    //       message: '上传附件支持xls,xlsx ,.docx , .doc,.pdf,.jpg,.png格式,大小不超过50M。',
    //       type: 'warning'
    //     })
    //     return false
    //   }
    //   if (!isLt2M) {
    //     this.$message.error('上传图片大小不能超过 50MB!')
    //     return false
    //   }
    // },
    // handlePictureCardflie (file) {
    //   // 附件成功
    //   // if (this.form.file !== '') {
    //   //   return this.$message.error('只可上传一份附件')
    //   // }
    //   console.log(file);
    //   this.form.file = file.data.url
    // },
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  // text-align: center;
  width: 50%;
  margin: 0px auto;
}
</style>